<template>
 <view class="elevtor-info">
		<view style="position: fixed;z-index: 3000;width: 100%;"></view>
		<view class="tips" v-if="!inputDisable">
			<view class="tips_text">
				<image src="/static/images/tips.png"></image>
				<text>请修改错误的项目信息,并提交</text>
			</view>
		</view>
		<view class="content">
			<view class="content-header">
				<view class="content-header-title">
					<view class="name">
						{{ info.name }}
					</view>
					<view class="location" @click="editLocation">
						<view style="display: flex; align-items: center;">
							<image src="@/static/images/maintain/location.png" class="close" style="width: 32rpx;height: 32rpx;"></image>
							{{inputDisable||status>0?'定位':'修改定位'}}
						</view>
					</view>
					
					</view>
					<view class="content-header-address">
						<view class="address_item old">
							{{ status===0?oldObj.locationAddress:'' }}
						</view>
						<view class="address_item new">
							{{ showLocation||status>0?info.locationAddress:'' }}
						</view>
					</view>
				
			</view>
			<view class="form-content" style="margin-top: 28rpx;">
				<view class="form-item address">
			
							<input v-if="!showAddress"
							style="width: 100%;height: 100%;"
							placeholder="请输入地址" v-model="info.address"
							@bindfocus="showAddress=false"
							@blur="showAddress=true"
		<view class="left">
						<text>*</text>地址
						</image>
					</view>
					<view class="right">
						<view class="" v-if="inputDisable||status>0">
							{{info.address}}
						</view>
						<view class="" v-if="!inputDisable">
							<view v-if="showAddress" @click="showAddress=false">
									{{info.address}}
							</view>							>
						</view>
					 </view>
				</view>
				<view class="form-item">
					<view class="left">
						<text>*</text>
						类型
					</view>
					<view class="right">
						 <view v-if="inputDisable||status>0">{{typeList[info.type]||'请选择'}}
						 </view>
						  <picker v-else @change="bindPickerChange" :value="info.type" :range="typeList" 
						  style="width: 100%;display: flex;
						    height: 100%;
                            justify-content: flex-end;">
						    <view class="picker">
						      {{typeList[info.type]||'请选择'}}
						    </view>
						  </picker>
						  <uni-icons color="#ccc" size="18" type="arrowright" />
					</view>
				</view>
				<view class="form-item">
					<view class="left">
						<text>*</text>
						维保联系人
					</view>
					<view class="right"><input type="text" :disabled="inputDisable||status>0" v-model="info.contactsName"/></view>
				</view>
				<view class="form-item">
					<view class="left">
						<text>*</text>
						电话
					</view>
					<view class="right">
						<input type="number" :disabled="inputDisable||status>0" v-model="info.phone" maxlength="11"/>
					</view>
				</view>
				<view class="form-item" v-if="inputDisable&&status==0">
					<view class="left">
						创建时间
					</view>
					<view class="right"><input type="text" :disabled="true" v-model="info.createTime"/></view>
				</view>
				<view class="form-item" v-if="inputDisable&&status==0">
					<view class="left">
						最后更新时间
					</view>
					<view class="right"><input type="text" :disabled="true" v-model="info.updateTime"/></view>
				</view>
				<view class="form-item">
					<view class="left">
						梯数
					</view>
					<view class="right"><input type="text" :disabled="true" v-model="info.eleTotal"/></view>
				</view>
				<view class="form-item" v-if="!inputDisable||status>0">
					<view class="left">
						实际梯数
					</view>
					<view class="count" style="width: 218rpx;">
						<view @click="handleSubtraction">-</view>
						<input type="text" :disabled="true" v-model="total"/>
						<view @click="handleAdd">
							+
						</view>
						</view>
				</view>
				<view class="form-item addNotice" v-if="!inputDisable||status>0">
					<view class="addNotice-title">
						新增梯数的使用标志、维保标志
					</view>
					<view class="imgBox" v-if="imgBoxList.length">
						 <image v-for="(item,index) in imgBoxList" :key="index" :src="item" @click="handleImg(index)"></image>
						 
					</view>
				</view>
				<view class="form-item addNotice" style="border-bottom: none;" v-if="!inputDisable||status>0">
					<view class="addNotice-title">
						补充信息
					</view>
					<view :class="['imgBox',inputDisable?'':'border']">
						<textarea v-model="info.remark" placeholder="请输入需要补充的其他信息" 
						:disabled="inputDisable||status>0"
						maxlength="300"
						/> 
						<view class="lenthTips" v-if="!inputDisable">{{info.remark?info.remark.length:0}}{{'/'+300}}</text>
					</view>
				</view>
			</view>
			</view>
           </view>
		 <view class="save">
		  	<view v-if="status===0">
		  		<view v-if="inputDisable" @click="aa">
		  			勘误
		  		</view>
		  		<view v-else @click="handleSave">
		  			提交
		  		</view>
		  	</view>
		  	<view v-else class="disable">{{['','待审批','通过','驳回'][status]}}</view>
		  </view>
			<uni-popup ref="addElevtor" :mask-click="false">
				<add-elevtor @cancle="handleClose" @comfire="handleComfire"></add-elevtor>
			</uni-popup>
		</view>
</template>

<script>
import {projectDetail,addDetail} from '@/apis/project.js';
import { approveDetail} from '@/apis/approve.js';
import imageDragSort from '@/components/image-drag-sort/index.vue';
import unipopup from '@/components/uni-popup/uni-popup';
import AddElevtor from './components/add-elevtor.vue';
const QQMapWX = require('@/utils/qqmap-wx-jssdk.js');
import { mapState } from 'vuex';
import {
	location
} from '@/apis/maintains.js';
const demo = new  QQMapWX ({
	key:'LWGBZ-T5PRJ-NWZFP-K7HPN-R6TPS-2XFTR'
});
export default {
	components: {
		unipopup,
		AddElevtor,
		imageDragSort
	},
	data() {
		return {
			closeFlag:true,
			inputDisable:true,
			buildingId:'',
			info:{},
			total:0,
			typeList: ['', '小区', '别墅', '商超','酒店/民宿','学校',
				'医院','工厂','其他','办公楼','政府单位','公共设施','出租房'
			],
			imgBoxList:[],
			status:0,
			businessApproveId:'' ,// 审批工单id
			oldObj:{},
			showAddress:false,
			showLocation:false
		};
	},
	onLoad(opt) {
		console.log(opt,'opt的值');
		if (opt.type == '0') {
			console.log('项目信息进来的');
			this.buildingId = opt.id;
			this.getProjectInfo();
		} else {
			console.log('审批进来的');
			this.businessApproveId = opt.id;
			this.getApproveDetail();
		}
	},
	created() {
			
	},
	onShow() {
			
	},
	computed: {
		   	...mapState('user', ['userinfo']),
		checkForm() {
			// 默认没有改变
			let isChange = false;
			// debugger
			isChange = Object.entries(this.oldObj).toString() === Object.entries(this.info).toString() ? false : true;
			console.log(Object.entries(this.oldObj).toString() === Object.entries(this.info).toString());
			if (this.oldObj.eleTotal !== this.total || this.imgBoxList.length) {
				isChange = true;
			}
				  return isChange;
		},
			
	},
	methods: {
		// 获取原来项目信息
		getProjectInfo() {
			projectDetail({buildingId:this.buildingId})
				.then(res=>{
					// console.log(res,'信息')
					if (res) {
						this.info = res.data;
						this.total = this.info.eleTotal;
						this.oldObj = JSON.parse(JSON.stringify(res.data)); // 深拷贝一下原始数据
						// this.imgBoxList=this.info.imgUrl
					}
				});
		},
		// 获取已提交项目信息
		getApproveDetail() {
			uni.showLoading({
				title:'加载中'
			});
			approveDetail({businessApproveId:this.businessApproveId})
				.then(res=>{
					if (res) { 
						this.info = res.data.buildingSubmitVO;
						this.status = res.data.approveStatus;
						this.imgBoxList = this.info.imgUrl;
						uni.hideLoading();
					}
				});
		},
		bindPickerChange(e) {
			   console.log(e);
			this.info.type = e.detail.value;
		},
		close() {
			console.log(1223);
			this.closeFlag = false;
		},
		// 增加梯数
		handleAdd() {
			if (this.inputDisable) {
				return;
			} else {
				if (this.total >= this.info.eleTotal) {
					this.$refs.addElevtor.open();
				} else {
					this.total = this.total + 1;
				}
			}
		},
		// 减少梯数
		handleSubtraction() {
			if (this.inputDisable) {
				return;
			} else {
				console.log('减少');
				if (this.total < 2) {
					uni.showToast({
						title:'电梯数量不能少于1',
						icon:'none'
					});
					return;
				}
				this.total = this.total - 1;
			}
		},
			
		// 保存
		handleSave() {
			uni.showModal({
				confirmColor:'#0091ff',
					  title: '提示',
					  content: '是否确认提交勘误',
					   success: (res)=> {
					          if (res.confirm) {
								  console.log(this.checkForm);
								  if (!this.checkForm) {
									  uni.showToast({
									  	title:'数据未修改',
								icon:'none'
									  });
									  return;
								  }
								  if (!this.info.phone || !this.info.contactsName || !this.info.type || !this.info.address) {
									  uni.showToast({
									  	title:'信息未完整',
									  	icon:'none'
									  });
									  return;
								  } else {
									  // console.log('可以提交')
									  // return
							if (!this.inputDisable) {
								uni.showLoading({
									title: '提交中'
								});
								this.info.eleTotal = this.total;
								this.info.imgUrl = this.imgBoxList;
								addDetail({...this.info,submitId:this.userinfo.user_id,buildingId:this.buildingId})
									.then(res=>{ 
										if (res) {
											  uni.hideLoading();
											  this.info = res.data.buildingSubmitVO;
											  this.status = res.data.approveStatus;
											  this.total = this.info.eleTotal;
											  this.imgBoxList = this.info.imgUrl || [];
											  this.inputDisable = true;
										}
									});
							}  
								  }
					          } else if (res.cancel) {
					              console.log('用户点击取消');
					          }
					      }
			});
		},
		aa() {
			console.log(1225);
			this.inputDisable = false;
		},
		handleClose() {
			this.$refs.addElevtor.close();
		},
		handleComfire(res) {
			// console.log(res,'接受')
			if (this.imgBoxList.length) {
				this.imgBoxList = [...this.imgBoxList,...res];
			} else {
				this.imgBoxList = res;
			}
			this.total = this.total + 1;
			this.$refs.addElevtor.close();
		},
		editLocation() {
			if (this.inputDisable) {
				return;
			}
			uni.chooseLocation({
				    success: (res)=> { 
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
					// console.log(this.info)
					this.getAddress();
					this.info.latitude = res.latitude;
					this.info.longitude = res.longitude;
					this.info.locationAddress = res.address + res.name;
					this.showLocation = true;
				    }
			});
		},
		previewImage(i,list) {
			// 预览图片
			this.$previewMedia({
				current:i,
				sources: list
			});
		},
		// 操作图片
		handleImg(index) {
			// 如果是未提编辑状态可以修改
			let  itemList = [];
			if (this.status === 0 && !this.inputDisable) {
				   console.log('可以修改');
				    itemList = ['查看大图','删除'];
			} else {
				// console.log('审批')
					 itemList = ['查看大图'];
			}
			uni.showActionSheet({
				itemList: itemList,
				success: res => { 
					// 如果是查看大图
					if (res.tapIndex == 0) {
						this.previewImage(index,this.imgBoxList);
					}
					// 如果是删除
					if (res.tapIndex == 1) {
						this.imgBoxList.splice(index,1);
					}
				}
			});
		},
		// 反查地址
		getAddress() {
			demo.reverseGeocoder({
				location:{
					latitude:this.info.latitude,
					longitude:this.info.longitude
				},
				success:(res)=>{ 
				},
				complete:(res)=>{
					// console.log(res,'失败')
				}
			});
		}
		
	}
};
</script>
<style></style>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f3f6f8;
	}

	uni-picker .uni-picker-action.uni-picker-action-confirm {
		color: #57dbd0 !important;
	}

	.elevtor-info {
		font-size: 28rpx;
		background-color: #f3f6f8;
		// height: calc(100vh - 84rpx);
		overflow-y: auto;
		overflow-x: hidden;

		.tips {
			color: #ff7505;

			.tips_text {
				display: flex;
				align-items: center;
			}

			display: flex;
			padding: 0 20rpx;
			justify-content: space-between;
			background: #fffadf;
			height: 80rpx;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.close {
				padding: 30rpx 0 30rpx 30rpx;
			}
		}

		.content {
			display: flex;
			justify-content: center;
			// height: 1082rpx;
			flex-direction: column;
			align-items: center;
			// padding-bottom: 40rpx;
			margin-bottom: 100rpx;

			&-header {
				width: 710rpx;
				.location{
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					font-size: 24rpx;
					color: #666;
					font-weight: 400;
					flex: 1;
					justify-content: center;
					// :nth-child(2){
					// 	text-align: right;
					// 	color: #FF7505;
					// }
				}

				&-title {
					// width: 414rpx;
					// height: 58rpx;
					font-size: 42rpx;
					font-family: PingFangSC, PingFangSC-Semibold;
					font-weight: 600;
					text-align: center;
					color: #333333;
					text-align: left;
					margin: 32rpx 0 0 0;
					display: flex;
					justify-content: space-between;
					.name{
						width: 550rpx;
					}
				}

				&-address {
					display: flex;
					// justify-content: flex-end;
					justify-content: space-between;
					.address_item{
						display: flex;
						flex:1
				        
					}
					.old{
						color: #999999;
						display: flex;
						
					}
					.new{
						color: #FF7505;
						display: flex;
						justify-content: flex-end;
						text-align: right;
						flex: 1;
					}
					// view{
					//     // width: 400rpx;
					// 	font-size: 24rpx;
					// 	font-family: PingFangSC, PingFangSC-Regular;
					// 	font-weight: 400;
					// 	display: flex;
					// 	color: #FF7505;
					// 	justify-content: flex-end;
					// 	 // text-align: right;
					// }
					
					 // width: 400rpx;
 					// line-height: 34rpx;
				}
			}

			.title {
				display: flex;
				height: 110rpx;

				view {
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
				}
			}

			.form-content {
				width: 710rpx;
				box-sizing: border-box;
				background: #fff;
				margin: 0rpx 0 20rpx 0;
				padding: 0 20rpx;
				border-radius: 8rpx;
                .address{
					textarea{
						min-height: 60rpx;
						    width: 100%;
						    height: 100rpx;
						    align-items: center;
						    display: flex;
						    align-items: center;
						    text-align: right;
					}
				}
				.form-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// padding: 40rpx 0rpx;

					border-bottom: 2rpx solid #e9e9e9;

					.unit {
						margin-left: 4rpx;
					}

					.left {
						height: 118rpx;
						font-size: 28rpx;
						color: #999;
						width: 170rpx;
						display: flex;
						align-items: center;
						text{
							color: red;
							padding: 5rpx;
							
						}

						image {
							width: 28rpx;
							height: 28rpx;
							margin-left: 10rpx;
						}
					}
					.right {
						min-height: 118rpx;
						display: flex;
						flex: 1;
						align-items: center;
						justify-content: flex-end;

						view:nth-child(1) {
							display: flex;
							height: 100%;
							align-items: center;
							width: 100%;
							justify-content: flex-end;
							text-align: right;
						}

						input {
							text-align: right;
							width: 100%;
						}

						text {
							color: #999;
						}
					}
					 .count{
					   width: 218rpx!important;
					   display: flex;
					   height: 118rpx;
					   align-items: center;
					   justify-content: flex-end;
					   input{
						   display: flex;
						   flex: 1;
						   text-align: center;
						   box-sizing: border-box;
						   height: 60rpx;
						   border-top: 2rpx solid #d3dbe1;
						   border-bottom: 2rpx solid #d3dbe1;
					   }
					   view{
						   display: flex;
						   width: 60rpx;
						   height: 60rpx;
						   color: #828E96;
						   align-items: center;
						   box-sizing: border-box;
						   justify-content: center;
						   background: #f3f6f8;
						   border: 2rpx solid #d3dbe1;
						   border-radius: 4rpx 0rpx 0rpx 4rpx;
					   }
				   }
				   
				}
				.addNotice{
					display: flex;
					flex-direction: column;
					.addNotice-title{
						width: 100%;
						align-items: flex-start;
						 padding: 20rpx 0 28rpx 0;
						 color: #999999;
						
					}
					.border{
						border: 2rpx solid #e9e9e9;
					}
					
					.imgBox{
						padding-bottom: 40rpx;
						margin: 0 20rpx;
						width: 100%;
						image{
							width: 112rpx;
							height: 112rpx;
							// border: 1rpx solid #ccc;
							margin-right: 18rpx;
							}
							textarea{
								width: 630rpx;
								margin: 20rpx;
							}
							.lenthTips{
								margin-right: 20rpx;
								color: #ccc;
								// width: 100%;
								display: flex;
								justify-content: flex-end;
							}
					}
				
				}
				
			}
		}

		.save {
			    display: flex;
			    justify-content: center;
			    padding: 14rpx 0;
			    background: #fff;
				position: fixed;
                bottom: 0;
				width: 100%;
				box-sizing: border-box;
				z-index: 50;

			view {
			    width: 710rpx;
			    background: #0091ff;
			    height: 70rpx;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    border-radius: 8rpx;
				color: #fff;
			}
			.disable{
				background-color: #EFEFEF;
				color: #cccccc;
				
			}
			
		}
	}
</style>
